import {messages} from "share/common";
/**
 * Created by Allen on 2018/1/8.
 */
import React from 'react'
import { connect } from 'react-redux'


import { Alert, Form, Switch, Icon, Input, Select, Button, message, Spin, Upload} from 'antd'
const FormItem = Form.Item;
const { TextArea } = Input;
const Option =  Select.Option;

import httpFetch from 'share/httpFetch'
import config from 'config'

class NewApplicationType extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      loading: false,
      setOfBookOptions: [],     //账套参数
      subsidyTypeOptions: [],   //补贴类型参数
      subsidyType: messages('finance-setting.key60'/*非补贴*/),    //补贴类型
      isNew: true,             //新建or编辑标识，默认新建
      upload: false,
      imageUrl: '',
      params:{
        checked: true
      }
    }
  }

  onCancle = () => {
    this.props.close()
  };

  //保存操作
  handleSave = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err,value) => {
      if (!err){
        this.setState({loading: true});
        let params = {};
        let method;

      }
    })
  };


  getSetOfBookOptions = () => {

  };

  render(){

    const { getFieldDecorator } = this.props.form;
    const { params } = this.props;
    const { setOfBookOptions, subsidyTypeOptions, loading, imageUrl} = this.state;
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 10, offset: 1}
    };
    const uploadButton = (
      <div>
        <Icon type={this.state.upload ? 'loading' : 'plus'}/>
        <div className="ant-upload-text">{messages('finance-setting.key61'/*点击选择*/)}</div>
      </div>
    );

    return(
      <div>
        <Form onSubmit={this.handleSave} >
          <FormItem {...formItemLayout} label={messages('finance-setting.key52'/*账套*/)}>
            {getFieldDecorator('setOfBook',{
              rules: [{
                required: true
              }],
              initialValue: params.setOfBook
            })(
              <Select onFocus={this.getSetOfBookOptions}>
                {setOfBookOptions.map(item => {
                  return <Option value={item.setOfBook} key={item.id}>{item.setOfBook}</Option>
                })}
              </Select> /*请输入*/
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('finance-setting.key53'/*申请类型代码*/)}>
            {getFieldDecorator('applicationTypeCode',{
              rules: [{
                required: true
              }],
              initialValue: params.applicationTypeCode
            })(
              <Input placeholder={messages('common.please.input')/*请输入*/}/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('finance-setting.key54'/*申请类型名称*/)}>
            {getFieldDecorator('applicationTypeName',{
              rules: [{
                required: true
              }],
              initialValue: params.applicationTypeName
            })(
              <Input/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('finance-setting.key56'/*补贴类型*/)}>
            {getFieldDecorator('subsidyType',{
              rules: [{
                required: true
              }],
              initialValue: this.state.subsidyType
            })(
              <Select >
                <Option value={messages('finance-setting.key62'/*差旅补贴*/)} key="travelSubsidy">{messages('finance-setting.key62'/*差旅补贴*/)}</Option>
                <Option value={messages('finance-setting.key63'/*日常补贴*/)} key="normalSubsidy">{messages('finance-setting.key63'/*日常补贴*/)}</Option>
                <Option value={messages('finance-setting.key60'/*非补贴*/)} key="non-subsidised">{messages('finance-setting.key60'/*非补贴*/)}</Option>
              </Select>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('common.remark')/*备注*/}>
            {getFieldDecorator('remark')(
              <TextArea placeholder={messages('common.please.input')/*请输入*/} autosize={{minRows: 2, maxRows: 6}}/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('finance-setting.key55'/*图标*/)}>
            {getFieldDecorator('icon',{
              rules: [{
                required: true
              }]
            })(
              <Upload name="avatar"
                      className="avatar-uploader"
                      listType="picture-card"
                      showUploadList={false}
                      beforeUpload={this.beforeUpload}
                      onChange={this.handleChange}>
                {imageUrl ? <img src={imageUrl} alt="" width={85} height={85}/> : uploadButton}
              </Upload>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('common.column.status')/*状态*/}>
            {getFieldDecorator('enabled',{
              initialValue: params.enabled,
              valuePropName: 'checked'
            })(
              <Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="cross"/>}/>
            )}
          </FormItem>
          <div className="slide-footer">
            <Button type="primary" htmlType="submit" loading={loading}>{messages('common.save')/*保存*/}</Button>
            <Button onClick={this.onCancle}>{messages('common.cancel')/*取消*/}</Button>
          </div>
        </Form>
      </div>
    )
  }
}

function mapStateToProps() {
  return {}
}
const WrappedNewApplicationType = Form.create()(NewApplicationType);

export default connect(mapStateToProps)(WrappedNewApplicationType)
